<template>
  <div class="app-container">
    <img style="width:100%;height:100%" src="../../assets/img/chat_bg.jpg" />

    <div class="abs cover pnl">
      <div class="top pnl-head" style="padding: 20px ; color: white;">
        <div id="userName">
          用户：{{ username }}
          <span style="float: right;color: green" v-if="isOnline">在线</span>
          <span style="float: right;color: red" v-else>离线</span>
        </div>
        <div
          id="chatMes"
          v-show="chatMes"
          style="text-align: center;color: #6fbdf3;font-family: 新宋体"
        >
          正在和 <font face="楷体">{{ toName }}</font> 聊天
        </div>
      </div>
      <!--聊天区开始-->
      <div class="abs cover pnl-body" id="pnlBody">
        <div
          class="abs cover pnl-left"
          id="initBackground"
          style="background-color: white; width: 100%"
        >
          <div class="abs cover pnl-left" id="chatArea" v-show="isShowChat">
            <div class="abs cover pnl-msgs scroll" id="show">
              <div class="pnl-list" id="hists"><!-- 历史消息 --></div>
              <div class="pnl-list" id="msgs" v-for="message in historyMessage">
                <!-- 消息这展示区域 -->
                <div class="msg guest" v-if="message.toName">
                  <div class="msg-right">
                    <div class="msg-host headDefault"></div>
                    <div class="msg-ball">{{ message.message }}</div>
                  </div>
                </div>
                <div class="msg robot" v-else>
                  <div class="msg-left" worker="">
                    <div
                      class="msg-host photo"
                      style="background-image: url('https://tianwenle.oss-cn-hangzhou.aliyuncs.com/2023/02/1117b0357d299749a28a2a7193346816122b8189bd-9079-4fda-9012-a6b6d1a91306.jpg')"
                    ></div>
                    <div class="msg-ball">{{ message.message }}</div>
                  </div>
                </div>
              </div>
            </div>

            <div class="abs bottom pnl-text">
              <div class="abs cover pnl-input">
                <textarea
                  class="scroll"
                  id="context_text"
                  @keyup.enter="submit"
                  wrap="hard"
                  placeholder="在此输入文字信息..."
                  v-model="sendMessage.message"
                ></textarea>
                <div class="abs atcom-pnl scroll hide" id="atcomPnl">
                  <ul class="atcom" id="atcom"></ul>
                </div>
              </div>

              <div
                class="abs br pnl-btn"
                id="submit"
                @click="submit"
                style="background-color: rgb(32, 196, 202); color: rgb(255, 255, 255);"
              >
                发送
              </div>
              <div class="pnl-support" id="copyright">
                <!-- <a href="http://www.itcast.cn">传智播客,版本所有</a> -->
              </div>
            </div>
          </div>

          <!--聊天区 结束-->
          <div class="abs right pnl-right">
            <div class="slider-container hide"></div>
            <div class="pnl-right-content">
              <div class="pnl-tabs">
                <div class="tab-btn active" id="hot-tab">好友列表</div>
              </div>
              <div class="pnl-hot">
                <ul class="rel-list unselect">
                  <li class="rel-item" v-for="friend in friendsList">
                    <a @click="showChat(friend)">{{ friend }}</a>
                  </li>
                </ul>
              </div>
            </div>

            <div class="pnl-right-content">
              <div class="pnl-tabs">
                <div class="tab-btn active">系统广播</div>
              </div>
              <div class="pnl-hot">
                <ul class="rel-list unselect" id="broadcastList">
                  <li
                    class="rel-item"
                    style="color: #9d9d9d;font-family: 宋体"
                    v-for="name in systemMessages"
                  >
                    您的好友
                    {{ name }} 已上线
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import chatApi from "@/api/chat";
let ws;
export default {
  data() {
    return {
      isShowChat: false,
      chatMes: false,
      isOnline: true,
      username: "",
      toName: "",
      sendMessage: {
        toName: "",
        message: ""
      },
      inputMessage: "",
      historyMessage: [
        /*{toName: "李四", message: "你好,张三"},
                    {toName: "李四", message: "在吗"},
                    {toName: "李四", message: "怎么不说话"},
                    {fromName: "张三", message: "你好,李四"}*/
      ],
      friendsList: [
        /* "李四",
                     "王五"*/
      ],
      systemMessages: [
        /*"张三",
                    "李四"*/
      ]
    };
  },
  created() {
    this.init();
  },
  methods: {
    async init() {
      // 获取当前用户的名字
      await chatApi.getUsername().then(res => {
        this.username = res.data.name;
      });
      // 获取当前网站的端口号

      //创建webSocket对象
      ws = new WebSocket("ws://localhost:8013/chat");

    //   // 获取当前网站的端口号
    //   let port = document.location.port;
    //   // 有端口号
    //   if (port !== "" || port != null) {
    //     //创建webSocket对象
    //     ws = new WebSocket(
    //       "ws://" + document.location.hostname + ":" + port + "/chat"
    //     );
    //   } else {
    //     // 无端口号
    //     //创建webSocket对象
    //     ws = new WebSocket("ws://" + document.location.hostname + "/chat");
    //   }

      //给ws绑定事件
      ws.onopen = this.onopen;
      //接收到服务端推送的消息后触发
      ws.onmessage = this.onMessage;

      ws.onclose = this.onClose;
    },
    showChat(name) {
      this.toName = name;
      //清除聊天区的数据
      let history = sessionStorage.getItem(this.toName);
      if (!history) {
        this.historyMessage = [];
      } else {
        this.historyMessage = JSON.parse(history);
      }
      //展示聊天对话框
      this.isShowChat = true;
      //显示“正在和谁聊天”
      this.chatMes = true;
    },
    submit() {
      this.sendMessage.toName = this.toName;
      this.historyMessage.push(JSON.parse(JSON.stringify(this.sendMessage)));
      sessionStorage.setItem(this.toName, JSON.stringify(this.historyMessage));
      ws.send(JSON.stringify(this.sendMessage));
      this.sendMessage.message = "";
    },
    onOpen() {
      this.isOnline = true;
    },
    onClose() {
      this.isOnline = false;
    },
    onMessage(evt) {
      //获取服务端推送过来的消息
      var dataStr = evt.data;
      //将dataStr 转换为json对象
      var res = JSON.parse(dataStr);

      //判断是否是系统消息
      if (res.system) {
        //系统消息  好友列表展示
        var names = res.message;
        this.friendsList = [];
        this.systemMessages = [];
        for (let i = 0; i < names.length; i++) {
          if (names[i] != this.username) {
            this.friendsList.push(names[i]);
            this.systemMessages.push(names[i]);
          }
        }
      } else {
        //非系统消息
        var history = sessionStorage.getItem(res.fromName);
        if (!history) {
          this.historyMessage = [res];
        } else {
          this.historyMessage.push(res);
        }
        sessionStorage.setItem(
          res.fromName,
          JSON.stringify(this.historyMessage)
        );
      }
    }
  }
};
</script>

<style lang="css" scoped src="../../styles/chat.css"></style>

<style></style>
